<template>
<div class="view-Var03">
	<div>-------------------- Var03 --------------------</div>
	<el-button @click='fnC1'>11</el-button>
	{{objC1.name1}}:{{objC1.name2}}:{{objC1.age}}
	<div>-------------------- Var03 --------------------</div>
</div>
</template>  
<script>
import { reactive, watch } from 'vue'

export default {
	name: 'Var03',
	setup (props, context) {
		const objC1 = reactive({ name1: "aa1", name2: 'xx2', age: 18 });

		const fnC1 = () => {
			objC1.name1 = 'bb1';
			objC1.age++;
			console.log('fnC1', 11);
		};
		watch(
		    () => objC1.age,
		    (newVal, oldVal) => {
		        console.log("新值:", newVal, "老值:", oldVal);
		    }
		);
		return {
			objC1,
			fnC1,
		}
	},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>